<template>
  <div class="box">
    <!-- 我的 -->
    <mt-header fixed title="我的"></mt-header>
    <div>
      <!-- 第一行 -->
      <div class="first">
        <img src="@/assets/img/user.png" alt="" class="touxiang" />
        <div class="yonghuxinxi">
          <!-- <div v-if="name != ''">{{ name }}</div> -->
          <div v-if="user == null">
            <mt-button type="primary" @click="login()"> 登录</mt-button>
            <mt-button type="primary" @click="register()" plain>注册</mt-button>
          </div>

          <div v-else>
            账号：{{ user }} &nbsp;
            <mt-button type="primary" @click="updateUser(null)" plain>退出</mt-button>
          </div>
        </div>
      </div>

      <!-- 第二行 -->
      <div class="second">
        <!-- <span>我的订单</span>
        <hr />
        <div class="">
          <mt-button type="default" @click="gouwuche()"><img src="@/assets/img/money.png" height="20" width="20" slot="icon"> <br> 待付款</mt-button>
          <mt-button type="default"><img src="@/assets/img/list.png" height="20" width="20" slot="icon"> <br>待使用</mt-button>
          <mt-button type="default"><img src="@/assets/img/tell.png" height="20" width="20" slot="icon"> <br>评价</mt-button>
          <mt-button type="default"><img src="@/assets/img/safe.png" height="20" width="20" slot="icon"> <br>售后</mt-button>
        </div> -->
      </div>
    </div>
    <!-- 第三行 -->
    <div class="third">
      <mt-cell title="冰上体验" to="/bsty" is-link value=""></mt-cell>
      <mt-cell title="冰雪演艺" to="/bxyy" is-link value=""></mt-cell>
      <mt-cell title="暖心服务" to="/nxff" is-link value=""></mt-cell>
      <mt-cell title="关于冰雪大世界" to="/about" is-link value=""></mt-cell>
    </div>

    <!-- 底部 -->
    <mt-tabbar v-model="selected" class="tabbar" fixed>
      <mt-tab-item id="index">
        <img src="../assets/img/home.png" alt="" slot="icon" /> 首页
      </mt-tab-item>
      <mt-tab-item id="fenlei">
        <img src="../assets/img/list.png" alt="" slot="icon" />商品
      </mt-tab-item>
      <mt-tab-item id="gouwuche">
        <img src="../assets/img/car.png" alt="" slot="icon" />购物车
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img src="../assets/img/user.png" alt="" slot="icon" />我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      name: "",
      selected: "mine",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    ...mapMutations(["updateUser"]),

    login() {
      this.$router.push({ path: "/login" });
    },
    register() {
      this.$router.push({ path: "/register" });
    },
    gouwuche() {
      this.$router.push({ path: "/gouwuche" });
    },
  },
  watch: {
    selected(newval, oldval) {
      console.log(oldval);
      switch (newval) {
        case "fenlei":
          this.$router.push({
            path: "/fenlei",
          });
          break;
        case "gouwuche":
          this.$router.push({
            path: "/gouwuche",
          });
          break;
        case "index":
          this.$router.push({
            path: "/",
          });
          break;
        case "mine":
          this.$router.push({
            path: "/mine",
          });
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// * {
//   text-align: center;
// }

.tabbar {
  bottom: 0px;
  height: 8vh;
}
.box {
  padding-bottom: 8vh;
  padding-top: 8vh;
}
.mint-header {
  font-size: 14px;
}
.first {
  display: flex;
  width: 90vw;
  margin: auto;
}
.touxiang {
  background-color: lightgray;
  width: 20vw;
  height: 20vw;
  border-radius: 10vw;
}
.box > div {
  margin: auto;
  margin-top: 10px;
}
.yonghuxinxi {
  display: flex;
  flex-direction: column;
}
.yonghuxinxi > div {
  text-align: left;
  width: 100%;
  height: 10vw;
  box-sizing: border-box;
  padding: 2vw;
  button {
    height: 12vw;
    margin-top: 2vw;
    margin-left: 10px;
  }
}
.second {
  display: flex;
  width: 90vw;
  margin: auto;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 5vh;
}
.second > span {
  display: block;
}
hr {
  background-color: lightgray;
  height: 1px;
  width: 100%;
  box-shadow: none;
  border: none;
}
.second > div {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  button {
    width: 25%;
    height: auto;
    padding: 0px;
    background-color: #fff;
    font-size: 4vw;
    box-shadow: none;
  }
}
.third {
  margin: auto;
  width: 90%;
}
</style>